<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
</head>
<body>
    <h1>XML DOM</h1>
    <hr>


    <ul id="books" title="这是一份书单"><!-- 我是个注释222 -->
        <li>程序员必看书单</li>
        <li>第一阶段:</li><li id="b1">《细说php》</li><!-- 我是个注释266662 -->
        <li>《MySQL必知必会》</li>
        <li>《javascript权威指南》</li>
        <li>第二阶段:</li>
        <li>《教你怎么不生气》</li>
        <li>《佛经》</li>
        <li>《老子》</li>
        <li>《沉默的愤怒》</li>
        <li>第三阶段:</li>
        <li>《颈椎病康复指南》</li>
        <li>《腰椎间盘突出日常护理》</li>
        <li>《高血压降压宝典》</li>
        <li>《精神病症状学》</li>
        <li>第四阶段:</li>
        <li>《活着》</li>
    </ul>

    <script>
        var books = document.getElementById('books');
        console.log('Document: ' , document);
        console.log('Element: ' ,  books);
        console.log('Attr: ' , books.getAttributeNode('title'));

        console.log('document的子节点个数: ' , document.childNodes.length);
        console.log('books的子节点个数: ' , books.childNodes.length);

        for (var i = 0; i < books.childNodes.length; i++) {
            console.log(books.childNodes[i]);
        }
        console.log('books的子元素节点个数: ' , books.children.length);

        console.log('books的首个子节点', books.firstChild);
        console.log('books的最后一个子节点', books.lastChild);


        console.log('books的父节点', books.parentNode);
        console.log('books的父元素节点', books.parentElement);


        console.log('b1的前一个节点: ', b1.previousSibling);
        console.log('b1的后一个节点: ', b1.nextSibling);

        console.log('document的nodeName: ' + document.nodeName);
        console.log('document的nodeValue: ' + document.nodeValue);
        console.log('document的nodeType: ' + document.nodeType);
        
        console.log('books的nodeName: ' + books.nodeName);
        console.log('books的nodeValue: ' + books.nodeValue);
        console.log('books的nodeType: ' + books.nodeType);
    </script>
</body>
</html>